
// 要想数字在指定时间完成变化，我们需要找到这个变化过程中的一些数学关系。目前，我们已经知道的有变化初始值0，变化最终值12000，动画总时长（假设为2S）。其次，每帧动画的间隔时长也是我们应该考虑的一个数值。

// 时间间隔越小，数字变化也就越快
// 动画总时长 / 时间间隔 * 数字的步长（每 1时间间隔增加的值） = 1200
// js实现动态变化数字
const directive = {
  inserted(el, binding) {
    // 最终要显示的数字
    let finalNum = el.innerText;
    // 动画间隔
    let rate = 200;
    // 总时长
    let time = 2000;
    // 步长，数据增加间隔
    let step = finalNum / (time / rate);
    // 初始值
    let count = 0;
    // 要保留的小数
    let timer = setInterval(() => {
      count = count + step;
      el.innerText = count.toFixed(0);
      if (count > finalNum) {
        // 避免count大于finalNum最终数字显示不对
        count = finalNum;
        el.innerText = count;
        // 清空定时器
        clearInterval(timer);
        timer = null;
      } 
    }, rate);
  },
};

export default directive;
